<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <script src="./static/js/vue.global.js"></script>
    <script  src="./static/element-plus/index.full.js"></script>
   
    <link rel="stylesheet" href="./static/element-plus/index1.css">
         
</head>
<body>
    <div id="app">
       <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="8">
                <h1>学习寄语</h1>
                <el-form>
                    <el-form-item label="姓名:">
                        <el-input v-model="name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄:">
                        <el-input v-model="age"></el-input>
                    </el-form-item>
                    <el-form-item label="身高:">
                        <el-input v-model="height"></el-input>
                    </el-form-item>
                    <el-form-item label="寄语:" v-if="height>180">
                        <el-alert   title="兄弟啊，再有八块腹肌会更好" type="success"></el-alert>
                    </el-form-item>
                    <el-form-item label="寄语:" v-else-if="height>170||height==170">
                        <el-alert   title="该用功学习了,不然没对象了" type="info"></el-alert>
                    </el-form-item>
                    <el-form-item label="寄语:" v-else-if="height>160||height==160">
                        <el-alert   title="兄弟啊,咱身高一般，但智商高啊" type="warning"></el-alert>
                    </el-form-item>
                    <el-form-item label="寄语:" v-else>
                        <el-alert   title="别理他们，咱浓缩的是精华" type="error"></el-alert>
                    </el-form-item>

                </el-form>
            </el-col>
            <el-col :span="8"></el-col>
       </el-row>  
    </div>
</body>
<script>
    const App={
     data(){
return{
    name:"",
    height:170,
    age:'',

}
     },
     methods:{
     }
    }
    Vue.createApp(App).use(ElementPlus).mount("#app")
</script>
</html>